<template>
  <div class="s-card">
    <div style="padding: 16px">
      <p class="s-card-title">{{ $t('operator.online_Terminals') }}</p>
      <div class="flex justify-between">
        <div class="s-card-label">{{ count }}</div>
        <div style="width: 60%">
          <progress-chart ref="progressChart" />
        </div>
      </div>
      <div
        v-if="allDevice"
        class="flex"
        style="padding-top: 4px; font-size: 14px; line-height: 20px"
      >
        <div class="percent-tag">{{ getPercent }}</div>
        <div style="color: #677788; margin-left: 8px">From {{ allDevice }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getOperatorDevicecount,
  getOperatorOnlineDevicecount,
  getOperatorOnlineDeviceTrend
} from '@/api/operator'
import progressChart from './online-progress-chart.vue'


export default {
  components: { progressChart },
  data() {
    return {
      operator: null,
      count: 0,
      allDevice: 0,
      onlineData: []
    }
  },
  computed: {
    getPercent() {
      let _percent = 'null'
      if (this.allDevice) {
        _percent = ((this.count * 100) / this.allDevice).toFixed(1) + '%'
      }
      return _percent
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.operator = JSON.parse(localStorage.getItem('operator-info'))
      this.getOperatorDevicecount()
      this.getOperatorOnlineDevicecount()
    },
    getOperatorDevicecount() {
      getOperatorDevicecount(this.operator.operatorId)
        .then((res) => {
          if (res.deviceCounts) {
            this.allDevice = res.deviceCounts
          }
        })
        .catch(this.$confirmError)
    },
    getOperatorOnlineDevicecount() {
      getOperatorOnlineDevicecount({ oid: this.operator.oid })
        .then((res) => {
          this.count = res
        })
        .catch(this.$confirmError)
    },
  }
}
</script>

<style lang="scss" scoped>
.s-card {
  width: 381px;
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin: 16px;
  .s-card-title {
    font-size: 14px;

    font-weight: 600;
    color: #93a0aa;
    line-height: 26px;
  }
  .s-card-label {
    font-size: 24px;
    line-height: 40px;
    font-weight: 600;
    color: #1e2022;
  }
}

.percent-tag {
  background: #e5f9f6;
  border-radius: 6px;
  color: #37c3b0;
  text-align: center;
  padding: 0 6px;
}
</style>
